<template>
<div>
    <div class="myexa-one">安全第一，生产为本</div>
    <div class="linel">
        <div id="linel" class="" style="width:90%;height:470px"></div>
    </div>
</div>
    
</template>
<script>


//vuecli脚手架也支持  node 中的模块化  common 规范   一般写代码用ES6的模块化( import )
var echarts=require("echarts/lib/echarts");             //引入 echarts 主模块 
            require("echarts/lib/chart/bar");           //引入柱状图
            require("echarts/lib/chart/line");           //引入折线图
            require("echarts/lib/chart/pie");           //引入饼状图
            require("echarts/lib/component/title");     //引入柱状图
            require("echarts/lib/component/legend");   // 引入提示框组件、标题组件、工具箱组件。
            require("echarts/lib/component/toolbox");   
            require("echarts/lib/component/markPoint");     
            require("echarts/lib/component/tooltip");   
   export default {
        name:'echarts',
        methods:{
            initData(){
                const option = {
                    // backgroundColor: '#1b1b1b',
                    tooltip: {
                        formatter: '{a} <br/>{c} {b}'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    series: [
                        {
                            name: '速度',
                            type: 'gauge',
                            min: 0,
                            max: 220,
                            splitNumber: 11,
                            radius: '50%',
                            axisLine: {            // 坐标轴线
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: [[0.09, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500']],
                                    width: 3,
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            axisLabel: {            // 坐标轴小标记
                                fontWeight: 'bolder',
                                color: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10
                            },
                            axisTick: {            // 坐标轴小标记
                                length: 15,        // 属性length控制线长
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: 'auto',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            splitLine: {           // 分隔线
                                length: 25,         // 属性length控制线长
                                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                    width: 3,
                                    color: '#fff',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            pointer: {           // 分隔线
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 5
                            },
                            title: {
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: 'bolder',
                                    fontSize: 20,
                                    fontStyle: 'italic',
                                    color: '#fff',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            detail: {
                                backgroundColor: 'rgba(30,144,255,0.8)',
                                borderWidth: 1,
                                borderColor: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 5,
                                offsetCenter: [0, '50%'],       // x, y，单位px
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: 'bolder',
                                    color: '#fff'
                                }
                            },
                            data: [{value: 40, name: 'km/h'}]
                        },
                        {
                            name: '转速',
                            type: 'gauge',
                            center: ['25%', '55%'],    // 默认全局居中
                            radius: '30%',
                            min: 0,
                            max: 7,
                            endAngle: 45,
                            splitNumber: 7,
                            axisLine: {            // 坐标轴线
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: [[0.29, 'lime'], [0.86, '#1e90ff'], [1, '#ff4500']],
                                    width: 2,
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            axisLabel: {            // 坐标轴小标记
                                fontWeight: 'bolder',
                                color: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10
                            },
                            axisTick: {            // 坐标轴小标记
                                length: 12,        // 属性length控制线长
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: 'auto',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            splitLine: {           // 分隔线
                                length: 20,         // 属性length控制线长
                                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                    width: 3,
                                    color: '#fff',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            pointer: {
                                width: 5,
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 5
                            },
                            title: {
                                offsetCenter: [0, '-30%'],       // x, y，单位px
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: 'bolder',
                                    fontStyle: 'italic',
                                    color: '#fff',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            detail: {
                                //backgroundColor: 'rgba(30,144,255,0.8)',
                                // borderWidth: 1,
                                borderColor: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 5,
                                width: 80,
                                height: 30,
                                offsetCenter: [25, '20%'],       // x, y，单位px
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: 'bolder',
                                    color: '#fff'
                                }
                            },
                            data: [{value: 1.5, name: 'x1000 r/min'}]
                        },
                        {
                            name: '油表',
                            type: 'gauge',
                            center: ['75%', '50%'],    // 默认全局居中
                            radius: '30%',
                            min: 0,
                            max: 2,
                            startAngle: 135,
                            endAngle: 45,
                            splitNumber: 2,
                            axisLine: {            // 坐标轴线
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                                    width: 2,
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            axisTick: {            // 坐标轴小标记
                                length: 12,        // 属性length控制线长
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: 'auto',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            axisLabel: {
                                fontWeight: 'bolder',
                                color: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10,
                                formatter: function (v){
                                    switch (v + '') {
                                        case '0': return 'E';
                                        case '1': return 'Gas';
                                        case '2': return 'F';
                                    }
                                }
                            },
                            splitLine: {           // 分隔线
                                length:15,         // 属性length控制线长
                                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                    width:3,
                                    color: '#fff',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            pointer: {
                                width:2,
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 5
                            },
                            title: {
                                show: false
                            },
                            detail: {
                                show: false
                            },
                            data: [{value: 0.5, name: 'gas'}]
                        },
                        {
                            name: '水表',
                            type: 'gauge',
                            center: ['75%', '50%'],    // 默认全局居中
                            radius: '30%',
                            min: 0,
                            max: 2,
                            startAngle: 315,
                            endAngle: 225,
                            splitNumber: 2,
                            axisLine: {            // 坐标轴线
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
                                    width: 2,
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            axisTick: {            // 坐标轴小标记
                                show: false
                            },
                            axisLabel: {
                                fontWeight: 'bolder',
                                color: '#fff',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10,
                                formatter: function(v){
                                    switch (v + '') {
                                        case '0': return 'H';
                                        case '1': return 'Water';
                                        case '2': return 'C';
                                    }
                                }
                            },
                            splitLine: {           // 分隔线
                                length: 15,         // 属性length控制线长
                                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                    width: 3,
                                    color: '#fff',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 10
                                }
                            },
                            pointer: {
                                width: 2,
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 5
                            },
                            title: {
                                show: false
                            },
                            detail: {
                                show: false
                            },
                            data:[{value: 0.5, name: 'gas'}]
                        }
                    ]
                };

                setInterval(function (){
                    option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
                    option.series[1].data[0].value = (Math.random()*7).toFixed(2) - 0;
                    option.series[2].data[0].value = (Math.random()*2).toFixed(2) - 0;
                    option.series[3].data[0].value = (Math.random()*2).toFixed(2) - 0;
                    myChart.setOption(option);
                },2000);

                this.myChart.setOption(option);
            }
        },
        mounted(){
            this.myChart=echarts.init(document.getElementById("linel"));
            this.initData();
        },
        data() {
            return {

            };
        },
   };
</script>
<style lang="scss" scoped>
.myexa-one{
    width: 90%;
    border: 1px solid #019EFF;
    text-align: center;
    color: #78F2FF;
    padding: 10px;
    margin-left: 4%;
    margin-top: 20px
}
.linel{
    display: flex;
    // color: white;
    justify-content: center;
    // background: gainsboro;
}
</style>